import { mounting } from "@/utils/funs"
import React from "react"
import dayjs from "dayjs"
import * as UI from "./ui"
import { type ColProps, type FormInstance } from "@/components/base"

export interface IOption {
    /** 标题 */
    title?: string;

    /** 
     * 提交数据的 API 函数
     * @param values 表单提交的值
     * @param data 附加数据
     * @returns 返回一个 Promise，表示提交结果
     */
    onSubmit?: (values, data) => Promise<void> | void;

    /**表单实例 */
    form?: FormInstance;

    /** 初始值 */
    initialValues?: any;

    /** 弹窗内容 */
    children?: React.ReactNode | React.ReactNode[];

    /** 布局方式 */
    layout?: 'horizontal' | 'vertical' | 'inline';

    /** 表单标签样式 */
    labelCol?: ColProps;

    /** 确认按钮文本 */
    okText?: React.ReactNode;

    /** 取消按钮文本 */
    cancelText?: React.ReactNode;

    /** onSubmit 时的附加数据 */
    data?: any
}

// export function useFormModal(option: IOption) {

//     const controller = React.useMemo(() => new UI.MainController(), [])

//     const open = React.useCallback((data?) => {
//         controller.open = true;
//         controller.data = data;
//         const key = dayjs().valueOf();
//         const clear = mounting(<UI.Main
//             key={key}
//             controller={controller}
//             afterClose={() => { setTimeout(clear) }}
//             {...option}
//         />)
//     }, [controller, option])

//     return {
//         open,
//     }
// }

export function formModal(option: IOption) {

    const controller = new UI.MainController();
    const { data, ...other } = option;

    controller.open = true;
    controller.data = data;
    const key = dayjs().valueOf();

    const clear = mounting(<UI.Main
        key={key}
        controller={controller}
        afterClose={() => { setTimeout(clear) }}
        {...other}
    />)
}
